<template>
  <div class="register-login">
    <van-nav-bar v-if="from!='share'" left-arrow @click-left="onClickLeft" />
    <div class="login-body">
      <p class="title">马上注册</p>
      <van-cell-group>
        <van-field
          v-model="mobile"
          clearable
          type="number"
          label="手机号"
          placeholder="请输入手机号码"
          maxlength="11"
          left-icon="phone"
        />
        <van-field v-model="verCode" clearable label="短信验证码" placeholder="请输入短信验证码" maxlength="10" left-icon="aim">
          <div class="code-operate" slot="button" @click="getCode">
            <span :class="{gray:countDownSecond >= 0}">{{codeText}}</span>
          </div>
        </van-field>
        <van-field
          v-model="password"
          clearable
          label="密码"
          placeholder="6~20位数字+字母组合"
          left-icon="lock"
           maxlength="100"
          :type="isEyeClose ? 'password' : 'text'"
          :right-icon="isEyeClose ? 'closed-eye' : 'eye-o'"
          @click-right-icon="changeShow"
        />
        <van-field
          v-if="!recommenderNo"
          v-model="agentNo"
           maxlength="20"
          clearable
          label="邀请码"
          placeholder="请输入邀请码"
          left-icon="friends-o"
        />
      </van-cell-group>
      <div class="about-bar">
        <van-checkbox icon-size="14px" v-model="hadRead">我已阅读并同意</van-checkbox>
        <div>
          <span @click="jumpLink('/about-detail',{title:'用户服务协议书'})">用户服务协议书</span>
          和
          <span @click="jumpLink('/about-detail',{title:'隐私政策'})">隐私政策</span>
        </div>
      </div>
      <div class="main-btn" @click="register">注册</div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import md5 from 'js-md5';
import { NavBar, CellGroup, Field, Toast, Checkbox} from "vant";
import { getClient } from '@/utils/util';
import { isIOS } from "mobile-device-detect";
import { setToken } from "@/utils/auth";
import { mapState, mapActions } from 'vuex';


Vue.use(Field)
  .use(CellGroup)
  .use(Toast)
  .use(Checkbox)
  .use(NavBar);
export default {
  data() {
    return {
      mobile: "",
      verCode: "",
      agentNo: "",
      password: "",
      codeText: "获取验证码",
      countDownSecond: -1,
      codeTimer: null,
      isEyeClose: true,
      from: this.$route.query.from || '',
      recommenderNo: this.$route.query.recommenderNo || '', // 链接上携带的邀请码，如有的话，用户不需再填写
      hadRead: false
    };
  },
  destroyed() {
    this.clearTimeCount(this.codeTimer);
  },
  computed: {
    ...mapState('user',{
      beforePath: state => state.beforePath,
    })
  },
  methods: {
    ...mapActions('user',['getUserInfo']),

    jumpLink(path,query) {
      this.$router.push({ path, query });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    changeShow() {
      this.isEyeClose = !this.isEyeClose;
    },
    getCode() {
      if (this.countDownSecond > 0) {
        return;
      }
      if (this.mobile == "") {
        Toast("请输入手机号码");
        return;
      }
      if (this.isValidateTel()) {
        //手机号输入正确，才能获取验证码
        this.getCodeReq(); //获取验证码
      }
    },
    /**
     * 验证码倒计时方法
     */
    timeCountDown() {
      this.codeText = "重新获取(60s)";
      var timer = 60000;
      this.countDownSecond = timer / 1000;
      this.codeTimer = setInterval(() => {
        timer -= 1000;
        if (timer <= 0) {
          clearInterval(this.codeTimer);
          this.codeText = "重新获取";
          this.countDownSecond = -1;
        } else {
          this.countDownSecond = timer / 1000;
          this.codeText = "重新获取(" + this.countDownSecond + "s)";
        }
      }, 1000);
    },
    /**
     * 清除倒计时相关数据
     */
    clearTimeCount() {
      clearInterval(this.codeTimer);
      this.codeText = "重新获取";
      this.countDownSecond = -1;
    },
    /**
     * 获取验证码接口
     */
    getCodeReq() {
      const params = { mobile: this.mobile };
      //手机号输入正确，才能获取验证码
      this.$http
        .post("/authCode/getRegisterCode", params)
        .then(res => {
          Toast("已发送验证码");
          this.timeCountDown()
        })
        .catch((error) => {
          Toast(error.message);
        });
    },
    /**
     * 判断输入手机号
     */
    isValidateTel() {
      let flag = true;
      if (!new RegExp("^1[0-9]{10}$").test(this.mobile)) {
        flag = false;
        Toast("请填写正确的手机号码");
      }
      return flag;
    },
    register() {
      const params = {
        mobile: this.mobile,
        verCode: this.verCode,
        agentNo: this.recommenderNo ? this.recommenderNo : this.agentNo,
        password: md5(this.password),
        clientId: getClient()
      };
      if(!this.mobile){
        Toast("请填写手机号码")
        return
      }
      if(!this.password){
        Toast("请设置密码")
        return
      }
      if (!new RegExp("^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$").test(this.password)) {
        Toast("请设置6~20位数字+字母组合的密码");
        return
      }
      if(!this.verCode){
        Toast("请填写验证码")
        return
      }
      if(!this.hadRead){
        Toast("请阅读并同意用户服务协议书和隐私政策")
        return
      }
      this.$http
        .post("/login/register", params)
        .then(res => {
          Toast('注册成功')
          // 注册完直接登录
          this.login()
        })
        .catch((error) => {
          Toast(error.message);
        });
    },
    login() {
      const params = {
        mobile: this.mobile,
        password: md5(this.password),
        clientId: getClient()
      };
      this.$http
        .post("/login/passwrodLogin", params)
        .then(res => {
          if (getClient() == 'APP') {
            this.$http
              .post("/user/uploadDevInfo",{devInfo:plus.push.getClientInfo().clientid,devType:isIOS?'ios':'android'})
              .then(res => {
              })
              .catch(error => {

              });
          }
          setToken(res.info.token);
          sessionStorage.removeItem('isShowIntegration') // 清除领取红包
          this.getUserInfo()
          this.$router.push(this.beforePath);
        })
        .catch(error => {
          Toast(error.message);
        });
    },
  }
};
</script>
<style lang="scss" scoped>
.register-login {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  .login-body {
    margin-top: 40px;
    padding: 0 15px;
    .title {
      font-size: 20px;
      margin-bottom: 40px;
    }
    /deep/ .van-hairline--top-bottom::after {
      border-top: 0;
    }
    /deep/ .field-group {
      position: relative;
      margin-top: 40px;
    }
    .code-operate {
      color: $red;
      .gray {
        color: #ccc;
      }
    }
  }
  .main-btn {
    margin: 40px auto 0;
    width: 86%;
    height: 40px;
    color: #fff;
    background: $red;
    border-radius: 20px;
    text-align: center;
    line-height: 40px;
    font-size: 14px;
  }
  .about-bar{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 16px;
    >div{
      margin-left: 10px;
      span{
        color: $primary-clr;
        text-decoration: underline;
      }
    }
  }
}
</style>